<html>
<head>
<script src="./echarts.common.min.js"></script>
<style>
        .page {
            width: 21cm;
            min-height: 29.7cm;
            padding: 2cm;
            margin: 1cm auto;
            border: 1px #D3D3D3 solid;
            border-radius: 5px;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        @page {
            size: A4;
            margin: 0;
        }
        @media print {
            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }
         /*去掉双重的border*/
        /*table{
            border-collapse: collapse;
            width: 21cm;
            height: 29.7cm;
            font-size: 14px;
            text-align: center;
        }*/
        /*table tr:nth-child(1) td{
            width: 25%;
        }*/
        .size{
            border-collapse: collapse; /*去掉双重的border*/
            width: 21cm;
            height: 29.7cm;
            font-size: 14px;
            text-align: center;
        }
        .size tr:nth-child(1) td{
            width: 25%;
        }

</style>
</head>
<body >
<div class="page">
    <table border="1">
        <tr class="tr-1">
            <td><div>单位名称</div></td>
            <td>
                <div class="input"></div>
            </td>
            <td><div>统一社会信用代码</div></td>
            <td>
                <div class="input"></div>
            </td>
        </tr>
        <tr class="tr-2">
            <td colspan="1"><div>吊销范围</div></td>
            <td colspan="9">
                <div>

                </div>
            </td>
        </tr>
        <tr class="tr-3">
            <td colspan="1"><div>吊销原因</div></td>
            <td colspan="9">
                <div>

                </div>
            </td>
        </tr>
        <tr class="tr-4">
            <td colspan="1" rowspan="4"><div>吊销来源</div></td>
            <td colspan="9" rowspan="4">
                <div class="check-box">
                </div>
            </td>
        </tr>
    </table>
</div>
<div class="page">
	<div id="first" style="width: 500px;height: 500px;z-index:43;"></div>
    <div border="1">
        <tr class="tr-1">
            <td><div>单位名称</div></td>
            <td>
                <div class="input"></div>
            </td>
            <td><div>统一社会信用代码</div></td>
            <td>
                <div class="input"></div>
            </td>
        </tr>
        <tr class="tr-2">
            <td colspan="1"><div>吊销范围</div></td>
            <td colspan="9">
                <div>

                </div>
            </td>
        </tr>
        <tr class="tr-3">
            <td colspan="1"><div>吊销原因</div></td>
            <td colspan="9">
                <div>

                </div>
            </td>
        </tr>
        <tr class="tr-4">
            <!-- <td colspan="1" rowspan="4"><div>吊销来源</div></td>
            <td colspan="9" rowspan="4">
                <div class="check-box">
                </div>
            </td> -->
            <td colspan="10" rowspan="4">
            	<table border=1 style="border:1px solid #000000;border-collapse: collapse;width: 100%;">
            		<tr><td></td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
            		<tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
            		<tr><td>111</td><td>111</td></tr>
            		<tr><td>111</td><td>111</td></tr>
            		<tr><td>111</td><td>111</td></tr>
            		<tr><td>111</td></tr>
            		<tr><td>111</td></tr>
            		<tr><td>111</td></tr>
            		<tr><td>111</td></tr>
            		<tr><td>111</td></tr>
            		<tr><td>111</td></tr>
            		<tr><td>4343242</td></tr>

            	</table>
            	<div>吊销来源</div>
            </td>
            <!-- <td colspan="9" rowspan="4">
                <div class="check-box">
                </div>
            </td> -->
        </tr>
    </div>
</div>
<body>
	<script>
	// a1();
        // 基于准备好的dom，初始化echarts实例
//         function a1() {
            var echar=echarts.init(document.getElementById("first"));

            // 指定图表的配置项和数据
            var option={
                title:{text:"柱状图"},
                tooltip:{show:true},
                legend:{data:["销量"]},//
                xAxis:{
                   data:["一月","二月","三月","四月"]
                },
                yAxis:{type:'value'},
                series:{
                    name:"销量",
                    type:"bar",
                    data:[200,400,600,300]
                }
            };
            // 使用刚指定的配置项和数据显示图表。
            echar.setOption(option);
       // }  
        alert(22222);
    </script>
</html>